<template>
  <div class="app-container">
    <el-form :inline="true" size="small" :model="formData">
      <el-form-item label="维修编号">
        <el-input v-model="formData.repairNo" placeholder="请输入维修编号"></el-input>
      </el-form-item>
      <el-form-item label="机器编号">
        <el-input v-model="formData.machineNo" placeholder="请输入机器编号"></el-input>
      </el-form-item>
      <el-form-item label="租赁销售订单编号">
        <el-input v-model="formData.orderNo" placeholder="请输入租赁销售订单编号"></el-input>
      </el-form-item>
      <el-form-item label="维修类型">
        <el-select v-model="formData.repairType" placeholder="请选择维修类型">
          <el-option label="维修" value="0"></el-option>
          <el-option label="退回" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchBtn" type="primary" icon="el-icon-search" size="mini">查询</el-button>
        <el-button @click="resetBtn" icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      plain
      icon="el-icon-plus"
      size="mini"
      @click="addHandler"
      style="margin-bottom: 10px"
      v-hasPermi="['module:repairRecord:add']"
    >新增
    </el-button>

    <el-card>
      <!-- 维修列表-->
      <el-table :data="repairList" :border="false" style="width: 100%">
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column type="expand" align="center" width="55">

          <template slot-scope="scope">
            <div style="margin-left: 100px">
            <el-table
              :data="scope.row.auxiliaryMaterialsList"
              style="width: 50%">
              <el-table-column
                prop="index"
                label="序号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="date"
                label="辅材名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="quantity"
                label="数量"
                width="180">
              </el-table-column>
              <el-table-column
                prop="unit"
                label="单位">
              </el-table-column>
              <el-table-column
                prop="money"
                label="金额">
              </el-table-column>
            </el-table>


            </div>
          </template>

        </el-table-column>
        <el-table-column prop="repairNo" label="维修编号" width="180" align="center"></el-table-column>
        <el-table-column prop="machineNo" label="机器编号" width="180" align="center"></el-table-column>
        <el-table-column prop="orderNo" label="租赁销售订单编号" width="180" align="center"></el-table-column>
        <el-table-column prop="repairType" label="维修类型" width="180" align="center">
          <template slot-scope="scope" width="80">
            <el-tag v-if="scope.row.repairType==0">维修</el-tag>
            <el-tag v-if="scope.row.repairType==1">退回</el-tag>
          </template>
        </el-table-column>
        <!-----------------------start----------------------------->
        <el-table-column prop="repairStrain" label="维修品类" width="180" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.repairStrain==0">大修</el-tag>
            <el-tag v-if="scope.row.repairStrain==1">中修</el-tag>
            <el-tag v-if="scope.row.repairStrain==2">小修</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="repairCategory" label="维修类别" width="180" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.repairCategory==0">项目维修</el-tag>
            <el-tag v-if="scope.row.repairCategory==1">仓库维修</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="repairContent" label="维修内容" align="center"></el-table-column>
        <el-table-column prop="repairMoney" label="维修费" align="center"></el-table-column>
        <el-table-column prop="auxiliaryMaterials" label="辅材" align="center"></el-table-column>
        <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
        <el-table-column prop="money" label="金额" align="center"></el-table-column>
        <!--------------------------end----------------------------->
        <el-table-column prop="repairAmount" label="维修总额" align="center">
          {{ getRepairAllMoney }}
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-hasPermi="['module:repairRecord:id']" type="text" size="small"
                       @click="detailsHandler(scope.row.id)">查看详情
            </el-button>
            <el-button v-hasPermi="['module:repairRecord:update']" type="text" size="small"
                       @click="updateHandler(scope.row.id)">修改
            </el-button>
            <el-button v-hasPermi="['module:repairRecord:delete']" type="text" size="small"
                       @click="delhandler(scope.row.id)">删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.pageNum"
        :page-sizes="[5,6,7,10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <!-- 新增,修改弹框-->
    <el-dialog
      :title="this.status===0 ? '新增维修记录' :'修改维修记录' "
      :visible.sync="isShow"
      @close="closeHandler"
      width="50%">
      <el-form label-width="124px" :model="addFormData" :rules="rules" ref="ruleForm" :inline="true"
               class="demo-form-inline">
        <el-form-item label="维修编号" prop="repairNo">
          <el-input v-model="addFormData.repairNo" placeholder="请输入维修编号"></el-input>
        </el-form-item>
        <el-form-item label="机器编号" prop="machineNo">
          <el-input v-model="addFormData.machineNo" placeholder="请输入机器编号"></el-input>
        </el-form-item>
        <el-form-item label="租赁销售订单编号">
          <el-input v-model="addFormData.orderNo" placeholder="请输入租赁销售订单编号"></el-input>
        </el-form-item>
        <el-form-item label="维修类型" prop="repairType">
          <el-radio-group v-model="addFormData.repairType">
            <el-radio :label="'0'">维修</el-radio>
            <el-radio :label="'1'">退回</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="repairCategory" label="维修类别">
          <el-select v-model="addFormData.repairCategory" placeholder="请选择维修品类">
            <el-option v-for="item in repairCategoryOptions" :key="item.dictValue" :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="contractTemplate" label="维修品类">
          <el-select v-model="addFormData.repairStrain" placeholder="请选择维修品类">
            <el-option v-for="item in repairStrainOptions" :key="item.dictValue" :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="维修内容">
          <!--大修-->
          <el-select v-if="addFormData.repairStrain==0" v-model="addFormData.repairContent" placeholder="请选择维修内容">
            <el-option v-for="item in bigRepairOptions" :key="item.dictValue" :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
          <!--中修-->
          <el-select v-else-if="addFormData.repairStrain==1" v-model="addFormData.repairContent" placeholder="请选择维修内容">
            <el-option v-for="item in middleRepairOptions" :key="item.dictValue" :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
          <!--小修-->
          <el-select v-else v-model="addFormData.repairContent" placeholder="请选择维修内容">
            <el-option v-for="item in smallRepairOptions" :key="item.dictValue" :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="repairMoney" label="维修品类费">
          <el-select v-model="addFormData.repairMoney" placeholder="请选择维修品类费">
            <el-option v-for="item in repairMoneyOptions" :key="item.dictValue" :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修描述" prop="repairDescription" style="display: block">
          <el-input type="textarea" v-model="addFormData.repairDescription" style="width: 400px"></el-input>
        </el-form-item>

        <el-form-item label="维修总额">
          <el-input disabled style="border: none" v-model="getRepairAllMoney" placeholder="请输入维修金额"></el-input>
        </el-form-item>

        <!-----------------start-------------------->
        <el-form-item label="辅材明细">
          <el-button type="success" @click="dialogMaterial=true" style="margin-bottom: 10px">新增辅材</el-button>
          <el-table :data="addFormData.auxiliaryMaterialsList">
            <el-table-column prop="repairMoney" label="维修费" align="center"></el-table-column>
            <el-table-column prop="auxiliaryMaterials" label="辅材" align="center"></el-table-column>
            <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
            <el-table-column prop="unit" label="单位" align="center"></el-table-column>
            <el-table-column prop="money" label="金额" align="center"></el-table-column>
          </el-table>
        </el-form-item>
        <!-------------------end------------------->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeHandler">取消</el-button>
        <el-button type="primary" @click="addBtn">确定</el-button>
      </span>
    </el-dialog>

    <!-----------------新增辅材明细的弹框 start-------------------->
    <el-dialog @close="closeMaterial" title="新增辅材明细" :visible.sync="dialogMaterial" width="30%">
      <el-form  label-width="100px" :model="auxiliaryForm">
        <el-form-item label="辅材名称" prop="auxiliaryMaterials">
            <el-input v-model="auxiliaryForm.auxiliaryMaterials"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="quantity">
          <el-input v-model="auxiliaryForm.quantity"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="auxiliaryForm.unit"></el-input>
        </el-form-item>
        <el-form-item label="金额" prop="money">
          <el-input v-model="auxiliaryForm.money"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogMaterial = false">取 消</el-button>
        <el-button type="primary" @click="dialogMaterialFn">确 定</el-button>
      </span>
    </el-dialog>
    <!-------------------end------------------->

    <!-- 详情弹框  -->
    <el-dialog
      title="维修订单详情"
      :visible.sync="detailsShow"
      width="50%"
    >
      <el-form :disabled="true" label-width="124px" :model="detailsList" :inline="true" class="demo-form-inline">
        <el-form-item label="维修编号">
          <el-input v-model="detailsList.repairNo" placeholder="请输入维修编号"></el-input>
        </el-form-item>
        <el-form-item label="机器编号">
          <el-input v-model="detailsList.machineNo" placeholder="请输入机器编号"></el-input>
        </el-form-item>
        <el-form-item label="租赁销售订单编号">
          <el-input v-model="detailsList.orderNo" placeholder="请输入租赁销售订单编号"></el-input>
        </el-form-item>
        <el-form-item label="维修类型">
          <el-radio-group v-model="detailsList.repairType">
            <el-radio :label="'0'">维修</el-radio>
            <el-radio :label="'1'">退回</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--        <el-form-item label="维修总额">-->
        <!--          <el-input v-model="detailsList.repairAmount" placeholder="请输入维修金额"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="维修描述" style="display: block">
          <el-input type="textarea" v-model="detailsList.repairDescription" style="width: 400px"></el-input>
        </el-form-item>
        <!---------------------------------->
        <el-form-item label="维修金额">
          <el-input v-model="detailsList.repairAmount" placeholder="请输入维修金额"></el-input>
        </el-form-item>
        <el-form-item label="维修描述" prop="repairDescription" style="display: block">
          <el-input type="textarea" v-model="detailsList.repairDescription" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="维修品类">
          <el-radio-group v-model="detailsList.repairStrain">
            <el-radio :label="'0'">大修</el-radio>
            <el-radio :label="'1'">中修</el-radio>
            <el-radio :label="'2'">小修</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="维修类别">
          <el-radio-group v-model="detailsList.repairCategory">
            <el-radio :label="'0'">项目维修</el-radio>
            <el-radio :label="'1'">仓库维修</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="维修内容">
          <el-select v-model="detailsList.repairContent" placeholder="请选择维修内容">
            <el-option label="更换脚轮" value="shanghai"></el-option>
            <el-option label="更换排水口" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修费">
          <el-button type="primary" disabled>80元</el-button>
          <el-button disabled>200元</el-button>
          <el-button disabled>400元</el-button>
        </el-form-item>
        <!---------------------------------->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @clcik="detailsShow=false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {getDicts} from '@/api/system/dict/data'
import {repairListApi, addRepairApi, delRepairApi, updateRepairApi, detailsRepairApi} from '@/api/module/repair.js'
import {listOrder} from "@/api/module/order";

export default {
  name: 'repair',
  data() {
    return {
      dialogMaterial: false,//控制辅材明细表单
      formData: {
        repairNo: '',
        machineNo: '',
        machineId: '',
        orderNo: '',
        repairType: '',
        repairStrain: '',//维修品类（大中小）
        repairCategory: '',//维修类别(项目维修/仓库维修)
        repairContent: '',//维修内容
        repairMoney: '',//维修费
        auxiliaryMaterials: '',//辅材
        quantity: '',//数量
        unit: '',//单位
        money: '',//单价
        pageSize: 5,
        pageNum: 1,
      },
      total: 0,//总数
      status: 0,//区分新增还是修改
      repairList: [],//维修记录表
      isShow: false,//控制新增的弹框
      detailsShow: false,//控制维修订单详情
      addFormData: {
        repairNo: '',//维修编号
        machineId: '',//机器id
        machineNo: '',//机器编号
        orderNo: '',//租赁销售订单编号
        repairType: '',//维修类型(维修/退回)
        repairDescription: '',//维修描述
        repairAmount: '',//维修总额
        orderId: '',//租赁销售订单id
        repairStrain: '',//维修品类（大中小）
        // bigRepair: [],//大修内容
        // middleRepair: [],//中修内容
        // smallRepair: [],//小修内容
        repairCategory: '',//维修类别(项目维修/仓库维修)
        repairContent: '',//维修内容
        repairMoney: '',//维修费(80/200/400)
        // auxiliaryMaterials: [],//辅材
        auxiliaryMaterialsList: [],//辅材明细表单的数据
        // bigRepairContent: [],//大修辅材类
        // middleRepairContent: [],//中修辅材类
        // smallRepairContent: [],//小修辅材类
        // quantity: '',//数量
        // unit: '',//单位
        // money: '',//单价
      },
      auxiliaryMaterialsList: [],//辅材明细表单的数据
      repairStrainOptions: [],//维修品类
      bigRepairOptions: [],//大修内容
      middleRepairOptions: [],//中修内容
      smallRepairOptions: [],//小修内容
      repairCategoryOptions: [],//维修类别(项目维修/仓库维修)
      repairMoneyOptions: [],//维修费
      bigRepairContentOptions: [],//大修辅材类
      middleRepairContentOptions: [],//中修辅材类
      smallRepairContentOptions: [],//小修辅材类
      //------------
      detailsList: {},//详情列表
      auxilisaryList:[],
      auxiliaryForm:{},
      rules: {
        repairNo: [
          {required: true, message: '请输入维修编号', trigger: 'blur'},
        ],
        repairType: [
          {required: true, message: '请输入维修类型', trigger: 'change'},
        ],
        machineNo: [
          {required: true, message: '请输入机器编码', trigger: 'blur'},
        ],
        repairDescription: [
          {required: true, message: '请输入维修描述', trigger: 'blur'},
        ]
      }
    }
  },
  computed: {
    //维修总额
    getRepairAllMoney() {
      //维修总额= 维修费 + 辅材单价*辅材数量
      return 1
    }
  },
  created() {
    this.initData()
    this.getRepairStrain()//维修品类
    this.getBigRepair()//维修内容
    this.getMiddleRepair()
    this.getSmallRepair()
    this.getRepairCategory()//维修类别
    this.getRepairMoney()//维修费用
    this.getBigRepairContent()
    this.getMiddleRepairContent()
    this.getSmallRepairContent()
    // this.getList()
  },
  methods: {
    async initData() {
      const {rows, total} = await repairListApi(this.formData)
      console.log('维修列表', rows)
      this.repairList = rows
      this.total = total
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formData.pageSize = val
      this.initData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formData.pageNum = val
      this.initData()
    },
    //  查询按钮
    searchBtn() {
      this.initData()
    },
    //  重置按钮
    resetBtn() {
      this.formData = {
        repairNo: null,
        machineNo: null,
        machineId: null,
        orderNo: null,
        repairType: null,
        pageSize: 5,
        pageNum: 1,
      }
      this.initData()
    },
    //  维修单的详情
    async detailsHandler(id) {
      this.detailsShow = true
      console.log(id)
      const res = await detailsRepairApi(id)
      console.log('维修单详情', res)
      this.detailsList = res.data
    },

    //点击修改功能
    async updateHandler(id) {
      this.status = 1
      this.isShow = true
      //点击修改  数据回显
      const res = await detailsRepairApi(id)
      this.addFormData = res.data
    },

    //  删除功能
    async delhandler(id) {
      // console.log(id)
      try {
        const res = await delRepairApi(id)
        console.log(res)
        if (res.code == 200) {
          this.$message.success("删除成功！")
        }
        this.initData()
      } catch {
        console.log(error)
        this.$message.error('删除失败!')
      }
    },

    //  新增 打开弹框
    addHandler() {
      this.isShow = true
      this.status = 0
      //机器id要在租赁订单上获取 等机器页面跳转新增 目前先写个死的id
      this.addFormData.machineId = 5

      //无机器id 不能直接新增机器维修单
      if (!this.addFormData.machineId) {
        this.isShow = false
        return this.$message('不能直接添加维修订单')
      }
    },

    //弹框确定按钮
    async addBtn() {
      try {
        if (this.status === 0) {
          //  表单需要提交数据
          if (!this.addFormData.repairNo.length || !this.addFormData.machineNo.length || !this.addFormData.repairType || !this.addFormData.repairDescription.length) {
            this.$message('请输入需要的内容！')
            return false
          }
          // 新增功能提交
          this.addFormData.auxiliaryMaterials=this.auxilisaryList
          const res = await addRepairApi(this.addFormData)
          console.log(res)
          if (res.code == 200) {
            this.isShow = false
            this.$message.success('添加成功')
            this.addFormData={}
            this.initData()
          }
        } else if (this.status === 1) {
          //  修改功能提交
          const {code} = await updateRepairApi(this.addFormData)
          if (code == 200) {
            this.isShow = false
            this.$message.success('修改成功')
            this.addFormData={}
            this.initData()
          }
        }
      } catch {
        // console.log(error)
        this.$message.error('添加失败')
      }
    },

    // 关闭弹框的回调
    closeHandler() {
      this.isShow = false
      this.addFormData={
        repairNo: '',//维修编号
        machineId: '',//机器id
        machineNo: '',//机器编号
        orderNo: '',//租赁销售订单编号
        repairType: '',//维修类型(维修/退回)
        repairDescription: '',//维修描述
        repairAmount: '',//维修总额
        orderId: '',//租赁销售订单id
        repairStrain: '',//维修品类（大中小）
        repairCategory: '',//维修类别(项目维修/仓库维修)
        repairContent: '',//维修内容
        repairMoney: '',//维修费(80/200/400)
        auxiliaryMaterialsList: [],//辅材明细表单的数据
      }

    },

    //.新增辅材弹框的关闭的回调
    closeMaterial() {
      this.dialogMaterial = false
      this.auxiliaryForm={}
    },

    //新增辅材弹框的确定按钮
    dialogMaterialFn() {
      this.addFormData.auxiliaryMaterialsList.push(this.auxiliaryForm)
      this.dialogMaterial = false

    },

    //获取维修品类（大、中、小）
    async getRepairStrain() {
      const res = await getDicts('repair_strain')
      // console.log(res)
      this.repairStrainOptions = res.data
    },

    //获取大修内容
    async getBigRepair() {
      const res = await getDicts('big_repair')
      this.bigRepairOptions = res.data
    },

    //获取中修内容
    async getMiddleRepair() {
      const res = await getDicts('middle_repair')
      // console.log('中修', res)
      this.middleRepairOptions = res.data
    },

    //获取小修内容
    async getSmallRepair() {
      const res = await getDicts('small_reapir')
      this.smallRepairOptions = res.data
    },

    //获取大修辅材类
    getBigRepairContent() {
      getDicts('big_repair_content').then(res => {
        this.bigRepairContentOptions = res.data
      })
    },

    //获取中修辅材类
    getMiddleRepairContent() {
      getDicts('middle_repair_content').then(res => {
        this.middleRepairContentOptions = res.data
      })
    },

    //获取小修辅材类
    getSmallRepairContent() {
      getDicts('small_repair_content').then(res => {
        this.smallRepairContentOptions = res.data
      })
    },


    //获取维修类别
    getRepairCategory() {
      getDicts('repair_category').then(res => {
        this.repairCategoryOptions = res.data
      })
    },

    //获取维修费
    getRepairMoney() {
      getDicts('repair_money').then(res => {
        this.repairMoneyOptions = res.data
      })
    },

    //列表数据的回显
    // getList() {
    //   // this.loading = true;
    //   listOrder(this.queryParams).then(response => {
    //     this.repairList = response.rows;
    //     // 产品类型判断
    //     let arr = this.repairList;
    //     arr.forEach(item => {
    //       //维修类别
    //       item.repairContent = this.getValue(this.bigRepair, item.repairContent)
    //     });
    //     this.repairList = arr;
    //     this.total = response.total;
    //     // this.loading = false;
    //   });
    // },

    //拿到字典管理的文字，返回出去，用来数据回显
    getValue(arr, item) {
      for (let i = 0; i < arr.length; i++) {
        if (item === arr[i].dictValue) {
          return arr[i].dictLabel
        }
      }
    },
  },
}

</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

